<template>

    <span :endTime="endTime" :endText="endText" :timestamp="timestamp">
        <slot>
            {{content}}
        </slot>
    </span>
</template>
<script>
  export default {
    data(){
      return {
        content: '',
        time:0,
      }
    },
    props:{
      endTime:{
        type: String,
        default :''
      },
      endText:{
        type : String,
        default:'已结束'
      },
      timestamp:{
        type: String,
        default :''
      }
    },
    mounted () {
      if(!this.endTime||!this.timestamp){
        return;
      }
      let end = new Date(this.endTime.replace(/-/g,'/'));
      let timestamp = new Date(this.timestamp.replace(/-/g,'/'));
      this.time = Math.abs((end.getTime() - timestamp.getTime()) / 1000);
      this.countdowm();

    },
    methods: {
      countdowm(){
        let self = this;
        let timer = setInterval(function(){

          self.time -= 1;
          if(self.time>0){
            let day = Math.floor(self.time/(3600*24));
            let hour=Math.floor(self.time%(3600*24)/3600);
            let min=Math.floor(self.time%(60*24)/60);
            let sec=Math.floor(self.time%60);
            hour = hour < 10 ? "0" + hour : hour;
            min = min < 10 ? "0" + min : min;
            sec = sec < 10 ? "0" + sec : sec;
            let format = '';
            if(day > 0){
              format =  `${day} 天 ${hour} 时 ${min} 分 ${sec} 秒`;
            }
            if(day <= 0 && hour > 0 ){
              format = `${hour} 时 ${min} 分 ${sec} 秒`;
            }
            if(day <= 0 && hour <= 0){
              format =`${min} 分 ${sec} 秒`;
            }
            self.content = format;
          }else{
            // clearInterval(timer);
            self.content = self.endText;
          }
        },1000);
      }
    }
  }
</script>
